<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="降价名称" prop="projectName">
          <el-input v-model="form.projectName" size="small" placeholder="请输入降价名称"/>
        </el-form-item>
        <el-form-item label="统计周期" prop="statisticalPeriod">
          <el-input v-model="form.statisticalPeriod" size="small" placeholder="请输入统计周期"/>
        </el-form-item>
        <el-form-item label="降价条件1" prop="termOneVisitorNumber">
          <el-input v-model="form.termOneVisitorNumber" size="small" class="width3 mr10" placeholder="请输入">
            <template slot="prepend">大于</template>
            <template slot="append">访客</template>
          </el-input>
          <el-checkbox v-model="form.termOneIsHistoryOrder">且历史从未出单</el-checkbox>
        </el-form-item>
        <el-form-item label="降价条件2" prop="termTwoVisitorNumber">
          <el-input class="width3 mr10" v-model="form.termTwoVisitorNumber" size="small" placeholder="请输入">
            <template slot="prepend">大于</template>
            <template slot="append">访客，</template>
          </el-input>
          <el-checkbox v-model="form.termTwoIsHistoryOrder">共出单</el-checkbox>
          <el-input class="ml10" style="width: 200px" v-model="form.termTwoHistoryOrderNumber" size="small"
                    placeholder="请输入">
            <template slot="append">单以内</template>
          </el-input>
        </el-form-item>
        <el-form-item label="降价数量" prop="priceOffNumber">
          <el-radio-group v-model="form.priceOffType">
            <div class="flex">
              <el-radio label="0">百分比</el-radio>
              <el-input v-model="percentage" style="width: 400px" size="small" placeholder="请输入">
                <template slot="append">%以内（占总在线商品数的百分比）</template>
              </el-input>
            </div>
            <div class="flex mt10">
              <el-radio label="1">个数</el-radio>
              <el-input v-model="form.priceOffNumber" style="width: 350px" size="small" placeholder="请输入">
                <template slot="append">个以内</template>
              </el-input>
            </div>
          </el-radio-group>
          <!--          <div class="text-danger">若超过涨价数量，则按亏损最多的调价，最终达到设定的规则</div>-->
        </el-form-item>
        <el-form-item label="降价周期" prop="priceOffPeriod">
          <el-input v-model="form.priceOffPeriod" style="width: 400px" size="small" placeholder="请输入">
            <template slot="append">天以内，不允许二次降价</template>
          </el-input>
        </el-form-item>
        <el-form-item label="降价幅度" prop="priceOffRange">
          <el-input v-model="form.priceOffRange" style="width: 400px" size="small" placeholder="请输入">
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="降价预期" prop="priceOffExpect">
          <el-radio-group v-model="form.priceOffExpectType" @change="changeExpect">
            <el-radio v-for="(item,index) in expectList" :key="index" :label="index" class="flex mb10">
              <el-input @input="inputExpect(index)" v-model="item['value'+index]" style="width: 300px" size="small"
                        placeholder="请输入">
                <template slot="prepend">{{ item.label1 }}</template>
                <template slot="append">{{ item.label2 }}</template>
              </el-input>
            </el-radio>
            <!--            <el-radio label="0" class="flex mb5">-->
            <!--              <el-input v-model="form.priceOffExpect" style="width: 300px" size="small" placeholder="请输入">-->
            <!--                <template slot="prepend">亏损不超过</template>-->
            <!--                <template slot="append">%</template>-->
            <!--              </el-input>-->
            <!--            </el-radio>-->
            <!--            <el-radio label="1" class="flex mb5">-->
            <!--              <el-input v-model="form.priceOffExpect" style="width: 300px" size="mini" placeholder="请输入">-->
            <!--                <template slot="prepend">盈利不低于</template>-->
            <!--                <template slot="append">%</template>-->
            <!--              </el-input>-->
            <!--            </el-radio>-->
            <!--            <el-radio label="2" class="flex mb5">-->
            <!--              <el-input v-model="form.priceOffExpect" style="width: 300px" size="mini" placeholder="请输入">-->
            <!--                <template slot="prepend">亏损不超过</template>-->
            <!--                <template slot="append">元人民币</template>-->
            <!--              </el-input>-->
            <!--            </el-radio>-->
            <!--            <el-radio label="3" class="flex">-->
            <!--              <el-input v-model="form.priceOffExpect" style="width: 300px" size="mini" placeholder="请输入">-->
            <!--                <template slot="prepend">盈利不低于</template>-->
            <!--                <template slot="append">元人民币</template>-->
            <!--              </el-input>-->
            <!--            </el-radio>-->
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addProject, queryProjectById, editProject} from "@/api/autoOperation/cutPrice";
import {getSellerStoreEmpower} from "@/api/seller/sellerStoreEmpower";

export default {
  name: "cutPrice",
  props: {
    storeId: {},
    configId: {
      type: String,
      default: ""
    },
    userId: { // 绑定店铺的用户id
      type: String,
      default: ""
    },
    storeUserName: { //店铺账号 cn码
      type: String,
      default: ""
    },
    isUseShareCode: { // 是否使用分享码
      type: String,
      default: "0"
    }
  },
  data() {
    return {
      buttonLoading: false,//确定提交表单按钮loading
      title: "新增降价配置",
      open: true,
      form: {},
      brandList: [],//品牌列表
      categoryList: [],//商品类目列表
      rules: {
        projectName: [{required: true, trigger: "blur", message: "降价名称不能为空"}],
        statisticalPeriod: [
          {required: true, trigger: "change", message: "统计周期不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        termOneVisitorNumber: [
          {required: true, trigger: "change", message: "降价条件1不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        termTwoVisitorNumber: [
          {required: true, trigger: "change", message: "降价条件2不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        priceOffNumber: [{required: true, trigger: "blur", validator: this.checkCutPriceNum}],
        priceOffPeriod: [{required: true, trigger: "change", message: "降价周期不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        priceOffRange: [{required: true, trigger: "change", message: "降价幅度不能为空"},
          {validator: this.$Validate.isPositiveInteger}],
        priceOffExpect: [{required: true, trigger: "blur", message: "请输入降价预期"},
          {validator: this.$Validate.isPositiveInteger}],
      },
      percentage: "",// 降价数量百分比
      expectList: [
        {label1: "亏损不超过", label2: "%", value0: ""},
        {label1: "盈利不低于", label2: "%", value1: ""},
        {label1: "亏损不超过", label2: "元人民币", value2: ""},
        {label1: "盈利不低于", label2: "元人民币", value3: ""},
      ]
    }
  },
  created() {
    if (this.configId) {
      this.getConfigDetail()
    } else {
      this.reset()
    }
  },
  methods: {
    // 获取降价配置详情
    getConfigDetail() {
      this.title = "修改降价配置"
      queryProjectById({id: this.configId}).then(res => {
        let data = res.data
        for (let key in data) { //将所有字符转成字符串
          if (data[key] != null) {
            data[key] = '' + data[key]
          }
        }
        this.form = data
        if (data.priceOffType == '0') {
          this.percentage = data.priceOffNumber
          this.form.priceOffNumber = ""
        } else {
          this.percentage = ""
          this.form.priceOffNumber = data.priceOffNumber
        }
        this.form.termOneIsHistoryOrder = data.termOneIsHistoryOrder == '0' ? false : true
        this.form.termTwoIsHistoryOrder = data.termTwoIsHistoryOrder == '0' ? false : true
        this.form.priceOffExpectType = Number(data.priceOffExpectType)
        this.expectList[this.form.priceOffExpectType]['value' + this.form.priceOffExpectType] = this.form.priceOffExpect

      })
    },
    // 校验降价数量
    checkCutPriceNum(rule, value, callback) {
      let value2 = this.percentage
      if (this.form.priceOffType == '0') {
        if (!value2) {
          callback(new Error("降价数量百分比不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, value2, callback)
        }
      } else {
        if (!value) {
          callback(new Error("降价数量个数不能为空！"));
        } else {
          this.$Validate.isPositiveInteger(rule, value, callback)
        }
      }

    },
    // 修改降价预期
    changeExpect(e) {
      this.form.priceOffExpect = this.expectList[e]['value' + e]
    },
    // 输入降价预期
    inputExpect(e) {
      let index = this.form.priceOffExpectType
      this.form.priceOffExpect = this.expectList[index]['value' + index]
    },
    // 确定提交
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.$confirm('是否确定提交降价计划？').then(() => {
            if (this.isUseShareCode == '1') {
              this.form.id = undefined;
              this.form.storeId = this.storeId
              this.form.userId = this.userId
              this.form.storeUserName = this.storeUserName
            }
            this.form.priceOffNumber = this.form.priceOffType == '0' ? this.percentage : this.form.priceOffNumber
            this.form.termOneIsHistoryOrder = this.form.termOneIsHistoryOrder ? '1' : '0'
            this.form.termTwoIsHistoryOrder = this.form.termTwoIsHistoryOrder ? '1' : '0'
            if (this.form.id) {
              editProject(this.form).then(res => {
                this.$message.success(res.msg)
                this.cancel()
              })
            } else {
              addProject(this.form).then(res => {
                this.$message.success(res.msg)
                this.cancel()
              })
            }
          })
        }
      })
    },
    // 取消
    cancel() {
      this.$emit('close', false)
    },
    // 重置
    reset() {
      this.form = {
        id: undefined,
        projectName: undefined,
        statisticalPeriod: undefined,
        termOneVisitorNumber: undefined,
        termOneIsHistoryOrder: true,
        termTwoVisitorNumber: undefined,
        termTwoIsHistoryOrder: true,
        termTwoHistoryOrderNumber: undefined,
        priceOffType: '0',
        priceOffNumber: undefined,
        priceOffPeriod: undefined,
        priceOffRange: undefined,
        priceOffExpect: undefined,
        priceOffExpectType: 0,//降价预期类型
        storeId: this.storeId,
        storeUserName: this.storeUserName,
        userId: this.userId,
      }
      this.resetForm("form");
    }
  }
}
</script>

<style scoped>

</style>
